<template>
	<view>

    <view class="u-flex" style="justify-content: center;padding: 30rpx;flex-direction: column">
      <image :src="imgurlBwc + '/order/wait_pay.png'" style="width: 88rpx;height: 88rpx"></image>
      <view style="font-size: 32rpx;color: #3D3D3D;font-weight: bold;margin-top: 10rpx">
        待支付
      </view>
      <view class="u-flex" style="justify-content: center;font-size: 24rpx;color: #666666;margin-top: 10rpx">
        请在
        <u-count-down
            :timestamp="findcountdown(orderDatas)"
            :show-days="true"
            :show-border="true"
            font-size="24"
            color="#FF4E0D"
            bgColor="#f4f4f4"
            separator-color="#FF4E0D"
            border-color="#f4f4f4">
        </u-count-down>
        内支付，过期订单将自动取消
      </view>
    </view>

    <view class="goods_info">
      <view style="height: 16rpx"></view>
      <view class="u-flex">
        <view class="goods_img">
          <image :src="packageimage(packageDetailsImages)" mode="aspectFill"></image>
        </view>
        <view class="goods_name">
          <view class="shopname">{{ packageDetails.name }}</view>
          <view class="dizhizu ellipsis-two-line" style="font-size: 24rpx">
            <text v-if="packageDetails.is_reservation == 2" style="color: #fd6a00;">免预约 | 无需预约</text>
            <text v-if="packageDetails.is_reservation == 1" style="color: #fd6a00;">需预约</text>
            <text>{{weekList.otherNum}}</text>
            均可使用
          </view>
          <view class="info_tags u-flex">
            <view style="color: #FF5F15">探店价:￥<text style="font-size: 39rpx">{{ toFixedTwo(packageDetails.price - packageDetails.rebate_amount) }}</text></view>
            <view style="width: 10rpx"></view>
            <u-tag :text="packageDetails.notes" type="success" size="mini"/>
          </view>

        </view>
      </view>
    </view>

<!--		<view class="info_address u-flex">
			<view class="info_address_left">
				<view class="u-flex">
          <view>{{shopsData.name}}</view>
          <image :src="imgurlBwc+'/order/right@2x.png'" style="margin-left: 10rpx;height: 21rpx;width: 12rpx;"></image>
        </view>
				<view class="left_2 u-flex"><u-icon name="clock" color="#666666" size="28"></u-icon>{{shopsData.open_time}}-{{shopsData.close_time}}</view>
        <view class="left_2 u-flex"><u-icon name="map" color="#666666" size="30"></u-icon><span class="text-Omit">{{shopsData.address}}</span></view>
			</view>
			<view class="info_address_right u-flex">
				<view class="right_1" @click="Daohang()">
          <image src="/static/tandian/address.png"></image>
					<view>导航</view>
				</view>
				<view class="right_1" @click="Tel()">
          <image src="/static/tandian/phone.png"></image>
					<view>电话</view>
				</view>
			</view>
		</view>-->

    <view class="info_address">
      <view class="left_1 text-Omit u-flex" style="align-items: center;display: flex;margin-top: 10rpx" @click="ToShopsDetails(orderDatas.shop_id, orderDatas.shop_package_id)">
        <view style="font-size: 28rpx;flex: 1;font-weight: bold">{{ shopsData.name }}</view>
        <image :src="imgurlBwc + '/user/right@3x.png'"
               style="width: 12rpx;height: 19rpx;;margin-left: 10rpx"></image>
      </view>
      <view class="u-flex" style="margin-top: 10rpx">
        <view class="info_address_left">
          <view class="left_2 u-flex">
            <u-icon name="clock" color="#666666"
                    size="28"></u-icon>
            {{ shopsData.open_time }}-{{ shopsData.close_time }}
          </view>
          <view class="left_2 u-flex">
            <u-icon name="map" color="#666666" size="30"></u-icon>
            <span
                class="text-Omit">
                {{ shopsData.address }}
              </span>
          </view>
        </view>
        <view class="info_address_right u-flex">
          <view class="right_1" @click="Daohang()">
            <image src="/static/tandian/address.png"></image>
            <view>导航</view>
          </view>
          <view style="width: 20rpx"></view>
          <view class="right_1" @click="Tel()">
            <image src="/static/tandian/phone.png"></image>
            <view>电话</view>
          </view>
        </view>
      </view>
    </view>

    <view class="details_info3">
      <view class="title" style="display: flex;align-items: center">
        <view class="bef_line"></view>
        <view style="margin-left: 10rpx">套餐详情</view>
      </view>
      <view class="list_info_wrap" v-if="goodsData.length != 0">
        <view class="list_item" v-for="(itemg,indexg) in goodsData" :key="indexg">
          <view class="fucai" style="display: flex;align-items: center"><span></span>{{ itemg.name }}</view>
          <view class="zicai_wrap">
            <view class="zicai u-flex" v-for="(items,indexs) in itemg.list" :key="indexs">
              <view>{{ items.name }}</view>
              <view>（{{ items.num || '0' }}份）</view>
              <view v-if="items.price != '0.00'">¥{{ items.price || '0.00' }}</view>
            </view>
          </view>
        </view>
      </view>
      <view v-else>
        <u-empty text="暂无套餐" mode="favor" font-size="24" icon-size="60"></u-empty>
      </view>
    </view>
		<view class="details_info2">
      <view class="title" style="display: flex;align-items: center">
        <view class="bef_line"></view>
        <view style="margin-left: 10rpx">订单信息</view>
      </view>
			<view style="margin-left: 20rpx">
        <view class="info_list u-flex">
          <view>订单号</view>
          <span>{{orderDatas.order_no}}</span>
        </view>
        <view class="info_list u-flex">
          <view>手机号</view>
          <span>{{userInfo.username}}</span>
        </view>
        <view class="info_list u-flex">
          <view>下单时间</view>
          <span>{{orderDatas.create_time}}</span>
        </view>
      </view>
		</view>

    <shop_detail :days="packageDetails.days" :usage_time="packageDetails.usage_time" :activity_rules="packageDetails.activity_rules"></shop_detail>

    <view :style="'height:' + footHeight + 'px'"></view>
		<view class="bottom-btn-wrap">
			<view class="bottom-fixed-btn" @click="TopPaySuccess()">
				<view class="btn pay">继续支付¥{{orderDatas.price || '0.00'}}</view>
			</view>
		</view>

	</view>
</template>

<script>
	import Shop_detail from "../../../components/shop/shop_detail.vue";

  const app = getApp();
	export default {
    components: {Shop_detail},
		data() {
			return {
				BestImgUrl: app.globalData.imgurl,
        imgurlBwc: app.globalData.imgurlBwc,
        footHeight: 0, //底部导航栏高度
				orderID: '',
				orderDatas: {},
				shopsData: {},
				packageDetails: {},
				goodsData: [],
				userInfo: {},
        weekList: {//获取使用须知、规则时间数据
          maxNum: '',
          minNum: '',
          otherNum: '',
        },
				packageDetailsImages: []
			}
		},
		onLoad(ops) {
			let Details = JSON.parse(decodeURIComponent(ops.data))
			console.log('订单数据', Details)
			//订单ID
			this.orderID = Details.id
      //获取底部导航栏高度
      uni.createSelectorQuery().select('.bottom-btn-wrap').boundingClientRect(rect => {
        this.footHeight = rect.height + 10
        console.log('底部导航栏高度', this.footHeight)
      }).exec();
		},
		onShow() {
			//获取订单详情
			this.GetDatails()
			//获取我的信息
			this.GetMyinfo()
		},
		methods: {
      toFixedTwo(val) {
        var str = Number(val).toFixed(2)
        return str;
      },
			GetDatails() {
				let that = this
				that.$api.GetTanDianOrderDetails({
					order_id: this.orderID,
					is_new: '',
					client: ''
				}).then(res => {
					console.log('订单详情', res.data.result);
					that.orderDatas = res.data.result
					
					that.shopsData = res.data.result.shop //店铺信息
					that.packageDetails = res.data.result.package //套餐数据
					that.goodsData = res.data.result.package.goods //套餐商品
					that.packageDetailsImages = res.data.result.package.images

          //把数组字符串转换为数组数字
          let weekArr = Object.values(res.data.result.package.week).map(item => parseInt(item))
          //改变数据类型
          const weekData = weekArr.map(num => ({
            1: {title: '一', num: '1'},
            2: {title: '二', num: '2'},
            3: {title: '三', num: '3'},
            4: {title: '四', num: '4'},
            5: {title: '五', num: '5'},
            6: {title: '六', num: '6'},
            7: {title: '日', num: '7'}}[num]));
          //清空that.weekList数据
          that.weekList = {maxNum: '', minNum: '', otherNum: ''};
          //判断是否连续
          if(this.isArrayContinuous(weekArr)){
            weekData.forEach((item, index) => {
              if (item.num == Math.max(...weekArr)) {
                that.weekList.maxNum = "星期"+item.title
              } else if(item.num == Math.min(...weekArr)) {
                that.weekList.minNum = "星期"+item.title
              }
            });
            that.weekList.otherNum = that.weekList.minNum + "到" + that.weekList.maxNum
            //console.log('是连续数字',that.weekList)
          }else{
            weekData.forEach((item, index) => {
              that.weekList.otherNum += "星期"+item.title+","
            })
            //console.log('不是连续数字')
          }
          console.log('使用须知、规则时间数据', that.weekList)
				}).catch(err => {
			
				})
			},
      //计算数组是否连续
      isArrayContinuous(arr) {
        const min = Math.min(...arr);
        const max = Math.max(...arr);
        const expectedLength = max - min + 1; // 计算理论上应有的长度
        const seen = new Set(arr); // 使用Set来记录已经出现的数字

        // 检查是否所有数字都出现过
        for (let i = min; i <= max; i++) {
          if (!seen.has(i)) {
            return false;
          }
        }
        return true;
      },
			GetMyinfo(){
				let that = this
				that.$api.GetuserInfo({
				
				}).then(res => {
					console.log('个人信息', res.data.result);
					that.userInfo = res.data.result
				}).catch(err => {
					
				})
			},
			Daohang() {
				wx.openLocation({
					latitude: Number(this.shopsData.latitude),
					longitude: Number(this.shopsData.longitude),
					scale: 18,
					name: this.shopsData.name,
					address: this.shopsData.address
				});
			},
			Tel() {
				uni.makePhoneCall({
					phoneNumber: this.shopsData.tel, // 电话号码
					success: function() {
						console.log('拨打电话成功');
					},
					fail: function() {
						console.log('拨打电话失败');
					}
				});
			},
			packageimage(data){
				return data[0]
			},
			//倒计时计算
			findcountdown(item) {
				const now = new Date().getTime();
				let endTime = new Date(item.end_time).getTime()
				let isend = endTime - now > 0 ? (endTime - now) : 0;
				let seconds = this.$moment(isend).unix();
				console.log('结束时间',seconds)
				return seconds
			},
			TopPaySuccess(){
				let that = this
				
				//设置支付方式到缓存里面，以便订单详情待支付里面使用
				let payType = uni.getStorageSync("payTypes") || "applet_wechat";
				console.log('支付页面选择的支付方式',payType)
				uni.showLoading({
					title: '支付中'
				})
				setTimeout(()=>{
					that.$api.PayPackageOrder({
						order_id: that.orderID,
						pay_type: payType //支付方式：applet_wechat小程序支付,wechat 公众号支付，app_wechat微信APP支付，alipay支付宝支付，app_alipay支付宝APP支付
					}).then(res => {
						console.log('支付参数', res.data.result);
						
						uni.hideLoading();
						
						if(payType == "balance"){
							
							that.GetDatails()
							uni.navigateTo({
								url: '/subpackageA/pages/PaySuccess/PaySuccess?order_id=' + that.orderID + '&name=' + that.shopsData.name + '&price=' + that.orderDatas.price
							});
							
						} else if(payType == "applet_wechat"){
							uni.requestPayment({
								provider: "wxpay",
								timeStamp: res.data.result.timeStamp,
								nonceStr: res.data.result.nonceStr,
								package: res.data.result.package,
								signType: res.data.result.signType,
								paySign: res.data.result.paySign,
								success: function(reswxminapp) {
									that.GetDatails()
									uni.navigateTo({
										url: '/subpackageA/pages/PaySuccess/PaySuccess?order_id=' + that.orderID + '&name=' + that.shopsData.name + '&price=' + that.orderDatas.price
									});
								},
								fail: function(errwxmini) {
									uni.showToast({
										title: '支付失败',
										icon: 'none'
									});
								}
							});
						}
						
					}).catch(err => {
						uni.showToast({
							title: err.data.msg,
							icon: 'none',
							duration: 3000
						});
						uni.hideLoading()
					});
				},2000)
			},
			MoNiOrderWanChengs() {
        let that = this
        that.$api.MoNiOrderWanCheng({
          order_id: that.orderID,
        }).then(res => {
          console.log('模拟订单完成', res.data.result);
        }).catch(err => {

        })
      },
      ToShopsDetails(shopId,packageId) {
        // console.log('店铺ID', shopId,  packageId)
        uni.navigateTo({
          url: '/subpackageB/pages/shopsDetails/shopsDetails?&package_id=' + packageId + '&shops_id=' + shopId
        })
      }
		}
	}
</script>

<style lang="scss">
.bef_line {
  width: 10rpx;
  border-radius: 20rpx;
  height: 30rpx;
  background-color: #fd6a00;
}

	page {
		background-color: #f4f4f4;
	}

	.details_top {
		background-color: #ffffff;
		padding: 30rpx;
		border-radius: 0 0 28rpx 28rpx;
		margin-bottom: 30rpx;

		.dfk {
			color: $zzy-text-color-333333;
			font-weight: bold;
			font-size: 52rpx;
		}

		.goods_info {
			align-items: center;
			margin-top: 34rpx;

			.goods_img {
				width: 96rpx;
				height: 96rpx;

				image {
					width: 96rpx;
					height: 96rpx;
					border-radius: 16rpx;
				}
			}

			.goods_name {
				padding-left: 16rpx;
				flex: 1;

				view:nth-child(1) {
					font-weight: bold;
					color: $zzy-text-color-333333;
				}

				view:nth-child(2) {
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					color: $zzy-text-color-666666;
					flex: 1;

					span {
						color: $zzy-text-color-333333;
						font-size: 28rpx;
					}
				}
			}
		}
	}

	.info_address {
		align-items: center;
		justify-content: space-between;
		border-radius: 28rpx;
		background-color: #ffffff;
		padding: 28rpx;
		margin: 20rpx 20rpx 0;

		.info_address_left {
			flex: 1;

			.left_1 {
				font-weight: bold;
				font-size: 28rpx;
				align-items: center;
				-webkit-line-clamp: 1;
			}

			.left_2 {
				align-items: center;
				margin-top: 12rpx;
				color: $zzy-text-color-666666;
				font-size: 28rpx;

				.text-Omit {
					-webkit-line-clamp: 1;
				}

				.u-icon {
					margin-right: 10rpx;
				}
			}
		}

		.info_address_right {
			align-items: center;
			justify-content: center;
      margin-top: 50rpx;

			.right_1 {
				text-align: center;
				flex: 1;
				margin: 0 0 0 30rpx;

				image {
					width: 39rpx;
					height: 39rpx;
					margin-bottom: 6rpx;
				}

				color: $zzy-text-color-666666;
				font-size: 22rpx;
			}
		}
	}

  .details_info3 {
    padding: 32rpx 28rpx;
    background-color: #ffffff;
    border-radius: 28rpx;
    margin: 20rpx;

    .title {
      font-size: 30rpx;
      color: $zzy-text-color-333333;
      font-weight: bold;
      width: 200rpx;
      height: 54rpx;
      margin-bottom: 28rpx;
    }

    .list_info_wrap {
      align-items: center;
      padding: 0 22rpx 0 22rpx;
      margin-top: 20rpx;

      .list_tile {
        color: $zzy-text-color-333333;
        font-weight: bold;
        font-size: 28rpx;
        align-items: center;

        span {
          display: inline-block;
          width: 9rpx;
          height: 9rpx;
          border-radius: 200rpx;
          background-color: $zzy-text-color-999999;
          margin-right: 10rpx;
        }
      }

      .list_item {
        align-items: flex-start;
        margin-top: 20rpx;
        padding-left: 0;

        .fucai {
          font-size: 28rpx;
          color: $zzy-text-color-333333;
          flex: 1;
          font-weight: bold;

          span {
            display: inline-block;
            width: 10rpx;
            height: 10rpx;
            background-color: #d4d4d4;
            border-radius: 200rpx;
            margin-right: 14rpx;
          }
        }

        .zicai_wrap {
          padding-left: 22rpx;
        }

        .zicai {
          margin-top: 12rpx;

          view:nth-child(1) {
            font-size: 28rpx;
            color: $zzy-text-color-666666;
            flex: 1;
          }

          view:nth-child(2) {
            font-size: 28rpx;
            color: $zzy-text-color-666666;
            margin-left: auto;
          }

          view:nth-child(3) {
            font-size: 28rpx;
            color: $zzy-text-color-666666;
            font-weight: bold;
            margin-left: auto;
          }
        }
      }
    }
  }
	
	.details_info2 {
		padding: 32rpx 28rpx;
		background-color: #ffffff;
		border-radius: 28rpx;
		margin: 20rpx 20rpx 0;
	
		.title {
			font-size: 30rpx;
			color: $zzy-text-color-333333;
			font-weight: bold;
			width: 200rpx;
			height: 54rpx;
			margin-bottom: 16rpx;
		}
	
		.info_list {
			margin-top: 16rpx;
			align-items: flex-start;
	
			view {
				color: $zzy-text-color-333333;
				font-size: 28rpx;
				font-weight: bold;
			}
	
			span {
				padding: 0 0 0 20rpx;
				color: $zzy-text-color-666666;
				font-size: 28rpx;
				display: inline-block;
				flex: 1;
			}
		}
	}
  .goods_info {
    background-color: #ffffff;
    padding: 20rpx;
    align-items: center;
    border-radius: 28rpx;
    margin: 0 20rpx;

    .goods_img {
      width: 168rpx;
      height: 168rpx;

      image {
        width: 168rpx;
        height: 168rpx;
        border-radius: 16rpx;
      }
    }

    .goods_name {
      padding-left: 16rpx;
      flex: 1;

      .shopname {
        font-weight: bold;
        font-size: 30rpx;
        color: $zzy-text-color-333333;
        word-break: break-all;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        overflow: hidden;
      }

      .info_tags {
        margin-top: 6rpx;
      }

      .dizhizu {
        align-items: center;
        justify-content: space-between;
        font-size: 28rpx;
        margin-top: 10rpx;
        color: $zzy-text-color-999999;
      }
    }
  }
</style>